<template>
  <div id="order">  

   <el-form ref="form" :model="form" label-width="80px">  
     <el-row>
       <el-col :span="12">

          <div  style="display:flex;">
          <el-form-item label-width="0px" >
            <el-input v-model="form.input1" placeholder="姓名/手机号" class="search" style="width:160px;"></el-input>
          </el-form-item>

           <div class="custom_button" @click="search_but1"></div>
            </div>
        </el-col>
        <el-col :span="12" style="text-align: right;">
            <el-button class="custom_color_button" type="primary"  @click="bh_all">统一驳回</el-button>         
            <el-button class="custom_color_button" type="primary"  @click="go_order_xq">驳回/确认详情</el-button>
            <el-button  class="custom_color_button" type="primary" @click="output">导出表格</el-button>    
        </el-col>
    </el-row>


     <el-row> 
          <el-col :span="12" style="display:flex;">

             <el-form-item label-width="0px" >
                <el-select  v-model="form.select1_num" :placeholder="'请选择' + variable_name4 + '等级'" style="width:160px;">
                    <el-option  v-for="(item,index) in select1_data" :key="index" :label="item.title" :value="item.maid"></el-option>
                </el-select>
             </el-form-item>

            
    

            <el-form-item  label-width="0px" style="margin-left:10px;" >
                <el-select  v-model="form.select3_num" placeholder="请选择订单状态" style="width:160px;">
                    <el-option  v-for="(item,index) in select3_data" :key="index" :label="item.name" :value="item.id"></el-option>
                </el-select>
            </el-form-item>
          

           <el-form-item label="" label-width="0px" style="margin-left:10px;">
                <div style="display: flex;">
                      <el-date-picker  type="date" @change="time1_change" placeholder="开始日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"  v-model="form.time1" style="width:150px;"></el-date-picker>
                       <div style="width:20px;height:40px;line-height:40px;text-align: center;"> - </div>
                      <el-date-picker  type="date" @change="time2_change" placeholder="结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd"  v-model="form.time2" style="width: 150px;"></el-date-picker>
                </div>
          </el-form-item> 
     
           <div class="custom_button2"  style="margin-left:10px;"  @click="search_but2"></div>
  
        </el-col>

         <el-col :span="12" style="text-align: right;">
         <el-button class="custom_color_button" type="primary" @click="sx_but">刷新</el-button>
        </el-col>  
       
    </el-row>

  
   </el-form>

   <!-- 渲染数据list -->
   <receiving-order-list :orderdata="orderdata" :orderdata1="orderdata1" @up_list_fun="list_fun"> </receiving-order-list>


       <!-- 导出表格数据表格 -->
        <el-table v-show="false" :data="orderdata1" id="mytable1" style="width: 100%;height:10px;">
            <el-table-column :label="variable_name4 + '编号'"  align='center' width="150">                   
                    <template slot-scope="scope">                   
                        <span >{{ scope.row.pid }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="会员账号"  align='center'  width="170px">                   
                    <template slot-scope="scope">                   
                        <span >{{ scope.row.telphone }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="会员名称"  align='center'  width="170px">                   
                    <template slot-scope="scope">                   
                        <span >{{ scope.row.nickname }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="收获时间"  align='center'  width="170px">                   
                    <template slot-scope="scope">                   
                        <span >{{ scope.row.time }}</span>
                    </template>
                </el-table-column>
                <el-table-column :label="variable_name4 + '等级'"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span >{{ scope.row.level }}</span>
                    </template>
                </el-table-column>
                <el-table-column :label="variable_name4 + '价值'"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span >{{ scope.row.price }}</span>
                    </template>
                </el-table-column>
                <el-table-column :label="variable_name4 + '剩余价值'"  align='center'  width="170px" >                   
                    <template slot-scope="scope">                   
                        <span >{{ scope.row.surplus_price }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="收货地址"  align='center'  width="300px">                   
                    <template slot-scope="scope">                   
                        <span >{{ scope.row.address_region }} {{ scope.row.address_detail }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="收货姓名"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span >{{ scope.row.address_username }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="收货手机号"  align='center'  width="170px">                   
                    <template slot-scope="scope">                   
                        <span >{{ scope.row.address_telphone }}</span>
                    </template>
                </el-table-column>              
               <el-table-column label="收获状态"  align='center'  width="150px" >                   
                    <template slot-scope="scope">                   
                        <span v-if=" scope.row.status == 'TAKE_DELIVERY_MANUAL'">手动收获</span>
                        <span v-if=" scope.row.status == 'TAKE_DELIVERY_AUTO'">自动收获</span>
                        <span v-if=" scope.row.status == 'APPEALING'">自动收获</span>
                    </template>
                </el-table-column>

                <el-table-column label="订单状态"  align='center'   width="150px">                   
                    <template slot-scope="scope">                   
                        <span v-if=" scope.row.status == 'TAKE_DELIVERY_MANUAL'">发货订单</span>
                        <span v-if=" scope.row.status == 'TAKE_DELIVERY_AUTO'">发货订单</span>
                        <span v-if=" scope.row.status == 'APPEALING'">赎回订单</span>
                    </template>
                </el-table-column>
                 <el-table-column label="是否发货"  align='center'   width="150px">                   
                    <template slot-scope="scope">                   
                        <span v-if="scope.row.delivered == 1">已发货</span>
                        <span v-else>待发货</span>
                    </template>
                </el-table-column>
        </el-table> 

      
   <div style="margin-top:20px;text-align: center;">
      <el-pagination
        background
        @current-change="handleCurrentChange"
        :page-size="10"  
        layout="prev, pager, next, jumper"
        :total="count">
      </el-pagination>
    </div>


       <!-- 统一驳回 -->
    <el-dialog title="统一驳回" :visible.sync="bhall_mtk"  width="300px">
        <div style="width:100%;"> 

           <el-form ref="form"   label-width="0px" style="width:100%;">
              <el-form-item label="">
                 <el-date-picker  type="date" 
                  placeholder="选择日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd" 
                   v-model="bhall_form.onetime" style="width:100%;"></el-date-picker>
              </el-form-item>                                                                        
        </el-form>

          <div style="text-align: center;width:50%;margin:auto;">
                <el-button type="primary" class="custom_color_button" style="width:80%;" @click="bhall_qr()"  v-loading.fullscreen.lock="fullscreenLoading">确认</el-button>
            </div>
                  
        </div> 
    </el-dialog>

    

      
  </div>
</template>

<script>

import FileSaver from 'file-saver'
import XLSX from 'xlsx'

import ReceivingOrderList from '@/view/Order/ReceivingOrderList'
export default {
  name: 'order',
  data () {
    return {
        orderdata:[],
        orderdata1:[],
        page:1,
        count:0,
        form:{
          input1:'',
          select1_num:'',
          select3_num:'',
          time1:'',
          time2:''
        },
        select1_data:[],
        select3_data:[{"id":1,"name":"赎回订单"},{"id":2,"name":"未发货"},{"id":3,"name":"已发货"},{"id":4,"name":"已完成"}],
        bhall_mtk:false,
        bhall_form:{
          onetime:'',
        },
        fullscreenLoading: false
    }
  },
 components:{
    ReceivingOrderList
  },
  created(){
     this.list_fun()
     this.list_zy()
     this.list_fun1()
  },
  mounted (){
    
  },
  methods: {
    list_zy(){
      this.post("/manor/manorOption", {
       }).then(res => { 
           this.select1_data = res.result                          
       })
    },
    list_fun(){
        this.post("/order/listOfData", {
              page:this.page,
              is_all:0, //0查看带分页
              maid:this.form.select1_num,
              account:this.form.input1,
              startdate:this.form.time1,
              enddate:this.form.time2,
              type:this.form.select3_num,
	        }).then(res => {
            this.count = res.result.count
            this.orderdata = res.result.list

            for(let a of this.orderdata){
              if( a.status == 'TAKE_DELIVERY_MANUAL'){
                  a.sh_status = '手动收获'  //收获状态
                  a.dd_status = '发货订单'  //订单状态
              }else if(a.status == 'TAKE_DELIVERY_AUTO'){
                   a.sh_status = '自动收获'
                   a.dd_status = '发货订单'  //订单状态
              }else if(a.status == 'APPEALING'){  //待赎回的
                   a.sh_status = '自动收获'
                   a.dd_status = '赎回'  //订单状态
              }
            }


            //console.log( this.orderdata,"asda")
         })
    },
    list_fun1(){
        this.post("/order/listOfData", {
              page:this.page,
              is_all:1, //1查看带不分页
              maid:this.form.select1_num,
              account:this.form.input1,
              startdate:this.form.time1,
              enddate:this.form.time2,
              type:this.form.select3_num,
	        }).then(res => {
            this.orderdata1 = res.result.list

            for(let a of this.orderdata1){
              if( a.status == 'TAKE_DELIVERY_MANUAL'){
                  a.sh_status = '手动收获'  //收获状态
                  a.dd_status = '发货订单'  //订单状态
              }else if(a.status == 'TAKE_DELIVERY_AUTO'){
                   a.sh_status = '自动收获'
                   a.dd_status = '发货订单'  //订单状态
              }else if(a.status == 'APPEALING'){  //待赎回的
                   a.sh_status = '自动收获'
                   a.dd_status = '赎回'  //订单状态
              }
            }


            console.log( this.orderdata1,"asda")
         })
    },
    search_but1(){
        this.page = 1
        this.form.select1_num = ''
        this.form.select3_num = ''
        this.form.time1 = ''
        this.form.time2 = ''
        this.list_fun()
        this.list_fun1()
    },
    search_but2(){
        this.page = 1
        this.list_fun()
        this.list_fun1()
    },
    sx_but(){
        this.form={
          input1:'',
          select1_num:'',
          select3_num:'',
          time1:'',
          time2:''
        }
         this.page = 1
        this.list_fun()
        this.list_fun1()
    },
     select1_change(){
         console.log(this.form.select1_num)
     },
     time1_change(){
         console.log(this.form.time1)
     },
     time2_change(){
         console.log(this.form.time2)
     },  
     bh_all(){
           this.bhall_mtk = true
           this.bhall_form.onetime = ''
     },  
     bhall_qr(){
           this.fullscreenLoading = true;
           this.post("/order/delAutoHarvest", {
                    onetime:this.bhall_form.onetime,
                }).then(res => {

                    if(res.error_code == 0){
                      this.open1(res.result,'success')  //提示框
                      this.bhall_mtk = false
                      this.list_fun()
                       this.fullscreenLoading = false;
                    }else {
                      this.open1(res.message,'warning')
                      this.bhall_mtk = false
                       this.fullscreenLoading = false;
                }

             })
     },
     handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        this.page = val
        this.list_fun()
        console.log(`当前页: ${val}`);
      },
      go_order_xq(){
       this.$router.push({
          path: '/index/orderdetails',
          query: {
            name:"详情",
          }
        })
      },
      output() {
        var wb = XLSX.utils.table_to_book(document.querySelector("#mytable1"));//mytable为表格的id名
        var wbout = XLSX.write(wb, {
          bookType: "xlsx",
          bookSST: true,
          type: "array"
        });
        try {
          FileSaver.saveAs(
            new Blob([wbout], { type: "application/octet-stream" }),
            "sheet.xlsx"
          );
        } catch (e) {
          if (typeof console !== "undefined") console.log(e, wbout);
        }
        return wbout;
    },
  }
}
</script>


<style scoped>
</style>
